<script setup>
import * as echarts from 'echarts';

import { ref, onMounted } from 'vue'
import { findTestData, findData } from '@/api/dashboard';

//定义变量
const chartRef = ref();

onMounted(() => {
  //初始化图表
  var myChart = echarts.init(chartRef.value)
  //获取数据

  //图表的模型和数据
  var app = {};
  //一些函数的计算
  const categories = (function () {
    let now = new Date();
    let res = [];
    let len = 10;
    while (len--) {
      res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''));
      // console.log(now.toLocaleTimeString().replace(/^\D*/, ''));
      now = new Date(+now - 2000);
      // console.log(now);


    }
    return res;

  })();

  const categories2 = (function () {
    let res = [];
    let len = 10;
    while (len--) {
      res.push(10 - len - 1);
    }
    return res;
  })();

  const data = (function () {
    let res = [];
    let len = 10;
    while (len--) {

      res.push(Math.round(Math.random() * 0));

    }
    return res;
  })();

  const data2 = (function () {
    let res = [];
    let len = 0;
    while (len < 10) {
      res.push(Math.round(Math.random() * 0));
      len++;
    }
    return res;
  })();

  var option = {
    title: {
      text: '考试实时人数'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#283b56'
        }
      }
    },
    legend: {},
    toolbox: {
      show: true,
      feature: {
        dataView: { readOnly: false },
        restore: {},
        saveAsImage: {}
      }
    },
    dataZoom: {
      show: false,
      start: 0,
      end: 100
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: true,
        data: categories
      },
      // 数据二先不要
      {
        type: 'category',
        boundaryGap: true,
        data: categories2
      }
    ],
    yAxis: [
      {
        type: 'value',
        scale: true,
        name: '考试人数',
        max: 60,
        min: 0,
        boundaryGap: [0.2, 0.2]
      },
      {
        type: 'value',
        scale: true,
        name: 'Order',
        // max: 1000,
        max: 50,
        min: 0,
        boundaryGap: [0.2, 0.2]
      }
    ],
    series: [
      {
        name: '实时的考试人数',
        type: 'bar',
        xAxisIndex: 1,
        yAxisIndex: 1,
        data: data
      },
      {
        name: '实时的考试人数趋势',
        type: 'line',
        data: data2
      }
    ]
  };
  app.count = 11;
  setInterval(async function () {
    let axisData = new Date().toLocaleTimeString().replace(/^\D*/, '');
    data.shift();
    // data.push(Math.round(Math.random() * 1000));
    // data.push(Math.round(10);
    const result = await findData()


    data.push(result.data.count);

    data2.shift();
    data2.push(result.data.count);

    categories.shift();
    categories.push(axisData);
    categories2.shift();
    categories2.push(app.count++);
    myChart.setOption({
      xAxis: [
        {
          data: categories
        },
        {
          data: categories2
        }
      ],
      series: [
        {
          data: data
        },
        {
        data: data2
        }
      ]
    });
  }, 2100);

  //开始渲染图表
  myChart.setOption(option);

})
</script>

<template>
  <div ref="chartRef" style="height: 666px;width: 666px;margin-top: 20px;">

  </div>
</template>

<style scoped></style>